<template>
  <el-dialog
    class="basic-dialog"
    :model-value="visible"
    title="修改DNS地址"
    :width="500"
    @closed="handleClosed"
    @open="handleDialogOpen"
  >
    <el-form
      ref="formRef"
      :model="formData"
      class="w-full"
      label-width="92"
      label-position="top"
      require-asterisk-position="right"
    >
      <el-form-item label="地址1" prop="dns1" required>
        <el-select
          v-model="formData.dns1"
          fit-input-width
          class="w-full"
          placeholder="请选择DNS地址"
        >
          <el-option
            v-for="item in dnsServerList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
            :disabled="item.value === formData.dns2"
          >
            <text-ell :content="item.label" />
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址2" prop="dns2" required>
        <el-select
          v-model="formData.dns2"
          fit-input-width
          class="w-full"
          placeholder="请选择DNS地址"
        >
          <el-option
            v-for="item in dnsServerList"
            :key="item.label"
            :label="item.label"
            :value="item.value"
            :disabled="item.value === formData.dns1"
            ><text-ell :content="item.label"
          /></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button type="primary" :loading="loading" @click="handleSubmit">
        确定
      </el-button>
      <el-button :loading="loading" @click="emit('update:visible', false)"
        >取消</el-button
      >
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'

import { useSelectRemote } from '@/hooks/useSelectRemote'
import ToastUtils from '@/utils/toast'

interface IProps {
  visible: boolean
  loading?: boolean
  record?: {
    id: string
    dns: [string, string]
  } | null
  saveMethod: (id: string, dns: [string, string]) => Promise<void>
}

interface IEmits {
  (event: 'update:visible', value: boolean): void
  (event: 'update:loading', value: boolean): void
  (event: 'reload'): void
}

const emit = defineEmits<IEmits>()
const props = defineProps<IProps>()

const formRef = ref<FormInstance>()

/**
 * 获取DNS服务器列表，用于下拉选
 */
const { remoteMethod, opts: dnsServerList } = useSelectRemote(
  dnsServerListApi,
  {
    valueKey: 'id',
    labelKey: 'addr',
    queryKey: ''
  }
)

remoteMethod('')

watch(
  () => props.visible,
  newVal => {
    if (newVal) {
      remoteMethod('')
    }
  }
)

/**
 * 表单数据
 */
const formData = reactive({
  dns1: '',
  dns2: ''
})

/**
 * 保存方法
 */
const handleSubmit = async () => {
  emit('update:loading', true)
  try {
    if (props.record?.id) {
      await props.saveMethod(props.record.id, [formData.dns1, formData.dns2])
    }
    ToastUtils.success('修改成功')
    emit('reload')
    emit('update:visible', false)
  } finally {
    emit('update:loading', false)
  }
}

/**
 * @description dialog 打开事件
 */
const handleDialogOpen = () => {
  if (props.record) {
    formData.dns1 = props.record.dns[0]
    formData.dns2 = props.record.dns[1]
  }
}

/**
 * @description dialog 关闭前事件
 */
const handleClosed = () => {
  emit('update:loading', false)
  emit('update:visible', false)
  formRef.value?.resetFields()
}
</script>

<style scoped></style>
